<!--  -->
<template>
  <div class="user" style="margin: 15px">
    <div style="margin: 5px 0">
      <el-input
        placeholder="请输入订单号"
        style="width: 300px"
        v-model="searchText"
      >
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>

      <el-button style="margin-left: 5px" type="primary" @click="searchOrder"
        >搜索</el-button
      >
      <el-button style="margin-left: 5px" type="success" @click="getAll"
        >加载全部
      </el-button>
    </div>

    <el-table  :data="orders" border stripe height="600" :cell-style="CellStyle">
      <el-table-column type="index" label="序号"> </el-table-column>
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="code" label="订单号"></el-table-column>
      <el-table-column prop="addTime" label="下单时间"></el-table-column>
      <el-table-column prop="tatol" label="总金额"></el-table-column>
      <el-table-column prop="userName" label="下单人"></el-table-column>
      <el-table-column
        prop="status"
        :formatter="statusFormatter"
        label="订单状态"
      ></el-table-column>
      <el-table-column label="操作1">
        <template slot-scope="scope">
          <el-button type="primary" @click="showItem(scope.row.id)"
            >查看购买商品</el-button
          >
        </template>
      </el-table-column>

      <el-table-column label="操作2">
        <template slot-scope="scope">
          <el-button
            type="success"
            @click="toSendGood(scope.row)"
            :disabled="scope.row.status == 0 ? false : true"
            >去发货</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="show" title="查看购买商品"
      ><show-good :id="curOrderId"></show-good
    ></el-dialog>

    <el-pagination></el-pagination>
  </div>
</template>

<script>
import ShowGood from "./showGood.vue";
import { getAllOrder, toSendGood,searchOrderByCode } from "@/api/orders";
import { Message } from "element-ui";
export default {
  name: "",
  props: [""],
  data() {
    return {
      searchText: "",
      curOrderId: 0,
      show: false,
      orders: null,
    };
  },
  components: {
    ShowGood,
  },
  created() {
    this.getAll()
  },
  computed: {},
  beforeMount() {},
  mounted() {},
  methods: {
    showItem(id) {
      this.curOrderId = id;
      this.show = true;
    },
    getAll() {
      getAllOrder().then((res) => {
        res.code === 20000
          ? (this.orders = res.data)
          : Message.error("加载数据失败" + res.message);
      });
    },
    searchOrder() {
      searchOrderByCode(this.searchText).then(res=>{
        res.code === 20000
        ? (this.orders = res.data)
        : Message.error("加载数据失败" + res.message);
      })
    },
    toSendGood(row) {
      toSendGood(row.id).then((res) => {
        if (res.code === 20000) {
          row.status = 2
          Message.success("发货成功");
        } else {
          Message.error("加载数据失败" + res.message);
        }
      });
    },
    statusFormatter(row) {
      const statusArr = ["待发货", "已取消", "待收货", "已收货"];
      return statusArr[row.status];
    },
    CellStyle({ row, columnIndex }) {
      const colorarr = [
        "color:#F56C6C",
        "color:#909399",
        "color:#E6A23C",
        "color:#67C23A",
      ];
      if (columnIndex === 6) {
        return colorarr[row.status];
      }
    },
  },
  watch: {},
};
</script>

<style lang='' scoped>
</style>